<template>
  <div :class="eclass" :echartid="echartid"></div>
</template>
<script>
import echarts from 'echarts/lib/echarts'

export default {
  props:{
    options: {
      type: Object,
      required: true
    },

    eclass: {
      type: String,
      required: false
    },

    resize: {
      type: Boolean,
      default: false,
      required: false
    }
  },

  data() {
    return {
      echartid : 'echartid',
    };
  },

  watch: {
      resize(){
        this.chart.resize();
      }
  },

  methods:{
     init: function(){
       if(!this.chart) {
         var myChart = echarts.init(this.$el);
         this.chart = myChart
       }

       // 绘制图表
       this.chart.setOption(this.options);
     }
  },

  mounted(){
    this.init();

  }

}
</script>

<style lang="scss">
  .echart-wrapper{
    float: left;
    width: 300px;
    height: 400px;
  }
</style>
